<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/iosSelect.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?b25bf95dd99f58452db28b1e99a1a46f";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
        })();
</script>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>

</head>

<body>

<div id="app" v-cloak>

<!--  / header  -->
<div class="header_longevity">
    <div class="header_map_longevity">   
        <img src="images/jiantou.png" alt="">
        <span>返回</span>
    </div>
    <div class="logo_longevity">活力健身</div>
    <div class="header_shop_longevity">
        <div class="form-item item-line">
            <!-- <label>请选择银行</label> -->
            <div class="form-item item-line" id="select_contact">                 
    <!-- <label>省、市</label> -->                 
    <div class="pc-box">                     
        <input type="hidden" name="contact_province_code" data-id="0001" id="contact_province_code" value="" data-province-name="">                     
        <input type="hidden" name="contact_city_code" id="contact_city_code" value="" data-city-name=""><span data-city-code="510100" data-province-code="510000" data-district-code="510105" id="show_contact">出发城市筛选</span> 
    </div>             
</div>
        </div>
    
    </div>   
</div>
<!--  / header  -->
<div class="energetic">
        <div class="energetic1">
                <div class="energetic1-title">
                  
                    <div class="energetic1-title-1"><span class="energetic1-title-3"><img src="images/tuijian.png" alt="" width="22"></span>为您推荐</div>

                    <div class="energetic1-title-2"></div>
                </div>
                <!-- <div class="particulars" id="xq">

                    <div class="culars"><span class="ticulars"></span>为您推荐</div>

                    <div class="part_line"></div>
                </div> -->
                    <ul v-show="flag1">
                        <li class="energetic1-content" v-for="items2 in energetic_Tuijian" @click="goEnergeticDetail(items2.tourist_id)">
                            <div>
                                <div class="energetic1-content-left">
                                    <img :src="items2.logo_pic" alt="" class="img3">
                                </div>
                                <div class="energetic1-content-right">
                                    <p class="energetic1-content-text1">{{items2.tourist_name}}</p>
                                    <p class="energetic1-content-text2">
                                         {{items2.tourist_details}}
                                    </p>
                                </div>
                                <table style="clear:both;"></table>
                            </div> 
                            <div class="energetic1-content-text3"><span>￥<i>{{items2.price}}.00</i></span>/人</div>  
                        </li>                  
                    </ul>
                </div>
        </div>
        <div class="energetic1">
                <div class="energetic1-title1">
                    <div class="energetic1-title1-left">
                        <img src="images/shu.png" alt="">
                        <span>其他更多</span>
                    </div>
                    <div class="energetic1-title1-right">
                        <span>更多精彩，为您设计爱的旅途</span>
                        <img src="images/feiji.png" alt="">
                    </div>
                </div>
                    <ul>
                        <li class="energetic1-content" v-for="items1 in energetic_More" @click="goEnergeticDetail(items1.tourist_id)">
                            <div>
                                <div class="energetic1-content-left">
                                    <img :src="items1.logo_pic" alt="" class="img3">
                                </div>
                                <div class="energetic1-content-right">
                                    <p class="energetic1-content-text1">{{items1.tourist_name}}</p>
                                    <p class="energetic1-content-text2">
                                        {{items1.tourist_details}}
                                    </p>
                                </div>
                                <table style="clear:both;"></table>
                            </div> 
                            <div class="energetic1-content-text3"><span>￥<i>{{items1.price}}.00</i></span>/人</div>  
                        </li>
                        <!-- <li class="energetic1-content">
                                <div>
                                    <div class="energetic1-content-left">
                                        <img src="images/energetic-3.png" alt="" class="img3">
                                    </div>
                                    <div class="energetic1-content-right">
                                        <p class="energetic1-content-text1"><span>【组团游】</span>道家圣地 龙虎山</p>
                                        <p class="energetic1-content-text2">
                                                一会儿，车子发动，踏上了回家的归途“累并快乐着”，是大家一致的感受；在紧张工作取得了成绩后，再去放松游玩，那种愉悦与享受更是畅快人生、意...
                                        </p>
                                    </div>
                                    <table style="clear:both;"></table>
                                </div> 
                                <div class="energetic1-content-text3"><span>￥<i>400.00</i></span>/人</div>  
                        </li>  -->                  
                    </ul>
                </div>
        </div>

</div>

</div>

</body>
<script>
$(window).ready(function(){

    var vm = new Vue({
        el:"#app",
        data(){
          return{
            energetic_Tuijian:[],
            energetic_More:[],
            flag1:false,
          }
        },
        created:function(){
          var $this = this;
          $this.getTuijian();
          $this.getMore();
          console.log(1);
          
                                
        },
        mounted:function(){
          getLocation();
        },
        methods:{
          //活力健身-相关推荐
            getTuijian:function(){
                var $this = this;
                const data = {
                   type:'1',
                   city:sessionStorage.getItem("cityLocation"),

                }
                Axios.post(window.Url.energetic_fitness,data).then((res) => {
                  
                  if(res.result == 1){
                    $this.energetic_Tuijian = res.info.tourist;  
                    $this.flag1=true;                                
                  }else
                  {
                    console.log("活力健身-相关推荐:"+res.info);
                  }
                  
                }).catch((err) => {
                  console.log("活力健身-相关推荐:"+err)
                })
              
            },
            getMore:function(){
                var $this = this;
                const data = {
                   type:'2',
                   city:sessionStorage.getItem("cityLocation"),

                }
                Axios.post(window.Url.energetic_fitness,data).then((res) => {
                  
                  if(res.result == 1){
                    $this.energetic_More = res.info.tourist;                                  
                  }else
                  {
                    console.log("活力健身-相关推荐:"+res.info);
                  }
                  
                }).catch((err) => {
                  console.log("活力健身-相关推荐:"+err)
                })
              
            },
            goEnergeticDetail:function(touristId1){
                setCookie("touristId",touristId1);
                window.location.href="tourItinerary.html";
            },
         
        }

    })
 
function getLocation(){
    var selectContactDom = $('#select_contact');
                var showContactDom = $('#show_contact');
                var contactProvinceCodeDom = $('#contact_province_code');
                var contactCityCodeDom = $('#contact_city_code');
                selectContactDom.bind('click', function () {
                    var sccode = showContactDom.attr('data-city-code');
                    var scname = showContactDom.attr('data-city-name');

                    var oneLevelId = showContactDom.attr('data-province-code');
                    var twoLevelId = showContactDom.attr('data-city-code');
                    var threeLevelId = showContactDom.attr('data-district-code');
                    var iosSelect = new IosSelect(2, 
                        [iosProvinces, iosCitys],
                        {
                            title: '',
                            itemHeight: 35,
                            relation: [1, 1],
                            oneLevelId: oneLevelId,
                            twoLevelId: twoLevelId,
                            threeLevelId: threeLevelId,
                            callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                                contactProvinceCodeDom.val(selectOneObj.id); 
                                contactProvinceCodeDom.attr('data-province-name', selectOneObj.value);
                                contactCityCodeDom.val(selectTwoObj.id);
                                contactCityCodeDom.attr('data-city-name', selectTwoObj.value);

                                showContactDom.attr('data-province-code', selectOneObj.id);
                                showContactDom.attr('data-city-code', selectTwoObj.id);
                                showContactDom.attr('data-district-code', selectThreeObj.id);
                                showContactDom.html(selectTwoObj.value);
                            }
                    });
                });
}

$('.header_map_longevity').click(function(){
    history.go(-1);
});

// $('.energetic1 li').click(function(){
//     window.location.href = "tourItinerary.html";
// });

  
})  
</script>
<script src="js/zepto.js"></script>
<script src="js/areaData_v2.js"></script>
<script src="js/iosSelect.js"></script>

</html>
